<template>
	<view>
<image src="../../static/08.jpg" style="width: 100%;height: 160px;"></image>
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(../../static/01.jpg)"></view>
				<view class="content flex-sub">
					<view class="text-grey">夏清风</view>
					<view class="text-gray text-sm flex justify-between">
						个性签名：墙外一阵微风拂过，依墙而生的向阳花随风波动。

						<view class="text-gray text-sm">
							<text class="cuIcon-attentionfill margin-lr-xs">10</text> 
							<text class="cuIcon-appreciatefill margin-lr-xs">20</text> 
							<text class="cuIcon-messagefill margin-lr-xs">30</text> 
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="care" >
			<view class="gz">
				<span>关注:</span>
				<span>23</span>

			</view>

			<view class="fs">
				<span>粉丝:</span>
				<span>100</span>
			</view>

			
		</view>

		<view>
			<uni-grid :column="2" :highlight="true" @change="change">
				<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;">
						<image src="../../static/11.gif"></image>
						<text class="text">文本信息</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				dynamicList: [],
				list: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},
					{
						url: '/static/c5.png',
						text: 'Grid 5'
					},
					{
						url: '/static/c6.png',
						text: 'Grid 6'
					},
					{
						url: '/static/c7.png',
						text: 'Grid 7'
					},
					{
						url: '/static/c8.png',
						text: 'Grid 8'
					},
					{
						url: '/static/c9.png',
						text: 'Grid 9'
					}
				]

			}
		},
		methods: {
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			add() {
				if (this.dynamicList.length < 9) {
					this.dynamicList.push({
						url: `/static/c${this.dynamicList.length+1}.png`,
						text: `Grid ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			}
		}
	
	}
</script>

<style scoped>
	.span {
		display: block;

	}

	.gz {
		margin: 0 0 0 20px;
		display: inline-block;
	}

	.fs {
		margin: 0 0 0 20px;
		display: inline-block;
	}


	.bj {
		display: inline-block;
		border: #f1f1e6;
		border-style: solid;
		border-radius: 15px;
		/* text-align: center; */
		margin: 0 0 0 160px;
	}

	.care {
		background-color: #FFFFFF;
		
	}
	
		.image {
			width: 25px;
			height: 25px;
		}
	
		.text {
			font-size: 16px;
			margin-top: 5px;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			// display: block;
			/* #endif */
		}
	
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
	
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	
		.swiper {
			height: 420px;
		}
	
		/* #ifdef H5 */
		@media screen and (min-width: 768px) and (max-width: 1425px) {
			.swiper {
				height: 630px;
			}
		}
	
		@media screen and (min-width: 1425px) {
			.swiper {
				height: 830px;
			}
		}
	.cu-list-item{
		height: 200px;
	}
		/* #endif */
	.text-grey{
		font-size: 20px;
	}
</style>
